

import React, { useState } from 'react';
import { View, Text, ScrollView, TouchableOpacity, Image, Modal, Alert } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { FontAwesome6 } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import AsyncStorage from '@react-native-async-storage/async-storage';
import styles from './styles';

const UserCenterScreen = () => {
  const router = useRouter();
  const [isLogoutModalVisible, setIsLogoutModalVisible] = useState(false);

  const handleProfilePress = () => {
    console.log('我的资料功能暂未实现');
    // 注释：此功能在PRD中未明确定义具体页面，仅做UI展示
  };

  const handleNotificationPress = () => {
    router.push('/p-notification_settings');
  };

  const handleSecurityPress = () => {
    console.log('账户安全功能暂未实现');
    // 注释：此功能在PRD中未明确定义具体页面，仅做UI展示
  };

  const handleAboutPress = () => {
    router.push('/p-about_us');
  };

  const handleLogoutPress = () => {
    setIsLogoutModalVisible(true);
  };

  const handleCancelLogout = () => {
    setIsLogoutModalVisible(false);
  };

  const handleConfirmLogout = async () => {
    try {
      // 清除本地存储的登录信息
      await AsyncStorage.removeItem('@rememberedUser');
      await AsyncStorage.removeItem('@autoLogin');
      
      setIsLogoutModalVisible(false);
      
      // 跳转到登录页
      router.replace('/p-login');
    } catch (error) {
      console.error('退出登录失败:', error);
      Alert.alert('错误', '退出登录失败，请重试');
    }
  };

  const handleModalBackgroundPress = () => {
    setIsLogoutModalVisible(false);
  };

  const renderMenuItem = (
    icon: string,
    iconColor: string,
    iconBgColor: string,
    title: string,
    subtitle: string,
    onPress: () => void
  ) => (
    <TouchableOpacity style={styles.menuItem} onPress={onPress} activeOpacity={0.8}>
      <View style={styles.menuItemContent}>
        <View style={styles.menuItemLeft}>
          <View style={[styles.menuIconContainer, { backgroundColor: iconBgColor }]}>
            <FontAwesome6 name={icon} size={16} color={iconColor} />
          </View>
          <View style={styles.menuTextContainer}>
            <Text style={styles.menuTitle}>{title}</Text>
            <Text style={styles.menuSubtitle}>{subtitle}</Text>
          </View>
        </View>
        <FontAwesome6 name="chevron-right" size={14} color="#6b7280" />
      </View>
    </TouchableOpacity>
  );

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
        {/* 顶部用户信息区域 */}
        <LinearGradient
          colors={['#1f2937', '#111827']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
          style={styles.userHeader}
        >
          <View style={styles.userInfo}>
            <View style={styles.userAvatarContainer}>
              <Image
                source={{ uri: 'https://s.coze.cn/image/x6BzuAYhlIs/' }}
                style={styles.userAvatar}
              />
              <View style={styles.verificationBadge}>
                <FontAwesome6 name="check" size={10} color="#ffffff" />
              </View>
            </View>
            <View style={styles.userDetails}>
              <Text style={styles.userName}>张经理</Text>
              <View style={styles.departmentContainer}>
                <FontAwesome6 name="building" size={12} color="rgba(99, 102, 241, 0.7)" />
                <Text style={styles.userDepartment}>技术部</Text>
              </View>
              <Text style={styles.userRole}>高级产品经理</Text>
            </View>
          </View>
        </LinearGradient>

        {/* 功能菜单区域 */}
        <View style={styles.menuSection}>
          <View style={styles.menuList}>
            {renderMenuItem(
              'user-edit',
              '#6366f1',
              'rgba(99, 102, 241, 0.2)',
              '我的资料',
              '查看和编辑个人信息',
              handleProfilePress
            )}
            
            {renderMenuItem(
              'bell',
              '#f59e0b',
              'rgba(245, 158, 11, 0.2)',
              '通知设置',
              '管理通知方式和偏好',
              handleNotificationPress
            )}
            
            {renderMenuItem(
              'shield-halved',
              '#10b981',
              'rgba(16, 185, 129, 0.2)',
              '账户安全',
              '密码和安全设置',
              handleSecurityPress
            )}
            
            {renderMenuItem(
              'circle-info',
              '#06b6d4',
              'rgba(6, 182, 212, 0.2)',
              '关于我们',
              '应用版本和版权信息',
              handleAboutPress
            )}
          </View>
        </View>

        {/* 退出登录按钮 */}
        <View style={styles.logoutSection}>
          <TouchableOpacity 
            style={styles.logoutButton} 
            onPress={handleLogoutPress}
            activeOpacity={0.8}
          >
            <View style={styles.logoutButtonContent}>
              <FontAwesome6 name="right-from-bracket" size={16} color="#ef4444" />
              <Text style={styles.logoutButtonText}>退出登录</Text>
            </View>
          </TouchableOpacity>
        </View>
      </ScrollView>

      {/* 退出登录确认对话框 */}
      <Modal
        visible={isLogoutModalVisible}
        transparent={true}
        animationType="fade"
        onRequestClose={handleCancelLogout}
      >
        <TouchableOpacity 
          style={styles.modalOverlay} 
          activeOpacity={1} 
          onPress={handleModalBackgroundPress}
        >
          <View style={styles.modalContainer}>
            <TouchableOpacity activeOpacity={1}>
              <View style={styles.modalContent}>
                <View style={styles.modalIconContainer}>
                  <FontAwesome6 name="right-from-bracket" size={24} color="#ef4444" />
                </View>
                <Text style={styles.modalTitle}>确认退出</Text>
                <Text style={styles.modalMessage}>确定要退出当前账号吗？</Text>
                <View style={styles.modalButtons}>
                  <TouchableOpacity 
                    style={styles.cancelButton} 
                    onPress={handleCancelLogout}
                    activeOpacity={0.8}
                  >
                    <Text style={styles.cancelButtonText}>取消</Text>
                  </TouchableOpacity>
                  <TouchableOpacity 
                    style={styles.confirmButton} 
                    onPress={handleConfirmLogout}
                    activeOpacity={0.8}
                  >
                    <Text style={styles.confirmButtonText}>退出</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </TouchableOpacity>
          </View>
        </TouchableOpacity>
      </Modal>
    </SafeAreaView>
  );
};

export default UserCenterScreen;

